<template>
	<view class="app">
		<view class="header" >
			<view class="order-price">出示二维码核销订单</view>
			<!-- <image class="erwema" src="https://img-blog.csdnimg.cn/20191231121218576.png"></image> -->
			<view style="display: flex;justify-content: center;">
				<uqrcode ref="uQRCode" :text="uQRCodeText" :size="150" />
			</view>
		</view>
		<view class="xuanzlan">
			<view :class="xuanzl==0?'dqxuanz':'weixd'" @click="qiehxuanz(0)">支付方式</view>
			<view :class="xuanzl==1?'dqxuanz':'weixd'" @click="qiehxuanz(1)">支付记录</view>
		</view>
		<view class="pay-type" v-if="xuanzl==0">
			<view class="pay-item" v-for="(item,index) in payList" :key="index" @click="changePayType(index)">
				<view class="pay-item-left">
					<image mode="widthFix" class='pay-icon' :src="'../../static/'+item.img"></image>
					{{item.name}}
					<text style="margin-left: 30rpx;font-size: 42rp;font-weight: bold;color: #FA3534;margin-top: 5rpx;">{{item.yuer}}.00</text>
				</view>
				<image v-if="payType==index" class="check-icon" src="../../static/checked.png"></image>
				<image v-else class="check-icon" src="../../static/no-check.png"></image>
			</view>
		</view>
		<view class="pdhieee" v-if="xuanzl==1">
			<view class="zhiflius" v-for="item in jjlius" :key="item.id" @click="gozdxiangq(item.id)">
				<view class="neirxx">
					<view class="nirrr">{{item.zdshuom}}</view>
					<view class="fukneir">
						<view :class="item.sfklx==1?'zhichu':'shour'">{{item.mendian}}</view>
						<view class="ddshij">{{item.zdriqi}}</view>
					</view>
				</view>
				<view>
					<view :class="item.sfklx==1?'weish':'yish'">{{item.sfklx==0?'充值':'消费'}}{{item.zdjinre||0.00}}元
					</view>
				</view>
			</view>
		</view>
		<!-- 		<view class="footer">
			<view class="zfann" @click="zhifwanc">确认支付</view>
		</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				xuanzl: 0,
				payList: [
					// {name:"年卡支付(231次)",img:"gzguanl.png"},
					// {name:"余额支付(￥1284.21)",img:"yuer.png"},
					// {name:"微信支付",img:"wepay.png"},
					// {name:"银联支付",img:"pay-1.png"},
					// {name:"线下支付",img:"pay-2.png"},
					// {name:"支付宝支付",img:"alipay.png"},
				],
				jjlius: [{
					mendian: "西大东门店",
					hetongid: 0,
					queren: 0,
					sfklx: 1,
					sklx: 0,
					zdjinre: 30,
					zdriqi: "2021-12-28",
					zdshuom: "剪头发",
					zflx: 0
				}, {
					mendian: "支付宝充值",
					hetongid: 0,
					queren: 0,
					sfklx: 0,
					sklx: 0,
					zdjinre: 100,
					zdriqi: "2021-12-28",
					zdshuom: "充值",
					zflx: 0
				}, {
					mendian: "西大东门店",
					hetongid: 0,
					queren: 0,
					sfklx: 1,
					sklx: 0,
					zdjinre: 30,
					zdriqi: "2021-12-28",
					zdshuom: "剪头发",
					zflx: 0
				}, {
					mendian: "西大东门店",
					hetongid: 0,
					queren: 0,
					sfklx: 1,
					sklx: 0,
					zdjinre: 30,
					zdriqi: "2021-12-28",
					zdshuom: "剪头发",
					zflx: 0
				}, {
					mendian: "西大东门店",
					hetongid: 0,
					queren: 0,
					sfklx: 1,
					sklx: 0,
					zdjinre: 30,
					zdriqi: "2021-12-28",
					zdshuom: "剪头发",
					zflx: 0
				}],
				payType: 1,
				uQRCodeText: "",
			}
		},
		onLoad() {

		},
		onShow() {
			
		},
		onReady() {
			this.getPayList();
		},
		methods: {
			qiehxuanz(e) {
				this.xuanzl = e
			},
			changePayType(type) {
				if(type == this.payType) {
					return;
				}
				this.payType = type;
				uni.showLoading({
					title: "生成中...",
					mask: true,
				})
				setTimeout(() => {
					this.uQRCodeText = uni.getStorageSync('user_key').id + "," + this.payList[type].id+","+this.payList[type].name;
					// console.log(333,this.uQRCodeText)
					this.$refs.uQRCode.reload();
					this.$forceUpdate();
					uni.hideLoading();
				}, 500)
				
				uni.hideLoading();
			},
			zhifwanc() {
				uni.navigateTo({
					url: '../payResult/payResult'
				})
			},
			//获取支付方式列表
			getPayList() {
				uni.showLoading({
					title: "生成中...",
					mask: true,
				})
				uni.request({
					url: getApp().globalData.url + '/client/GetPaylist',
					data: {
						id: uni.getStorageSync('user_key').id,
					},
					method: "GET",
					header: {
						"Content-Type": "application/json"
					},
					success: (res) => {
						// console.log(666,res);
						if(res.data.code == 200) {
							this.payList = res.data.data;
							this.uQRCodeText = uni.getStorageSync('user_key').id + "," + this.payList[1].id+","+this.payList[1].name;
							// console.log(444,this.uQRCodeText)
							this.$refs.uQRCode.reload();
							this.$forceUpdate();
						}
						uni.hideLoading();
					}
				})
			},
	
	}
}
</script>
<style scoped lang="scss">
	.pdhieee {
		padding: 20rpx;

		.zhiflius {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			border-bottom: solid 1rpx #efefef;
			padding-bottom: 20rpx;

			.yish {
				font-size: 26rpx;
				color: #007AFF;
				font-weight: bold;
			}

			.weish {
				font-size: 26rpx;
				color: #ff58a3;
				font-weight: bold;
			}

			.zhiftb {
				width: 80rpx;
				height: 80rpx;
			}

			.neirxx {
				width: 500rpx;
				margin-top: 10rpx;

				.nirrr {
					font-weight: bold;
				}

				.fukneir {
					display: flex;
					align-items: center;
					font-size: 25rpx;

					.shour {
						color: #1aafff;
					}

					.zhichu {
						color: #ff2baa;
					}

					.ddshij {
						margin-left: 50rpx;
						color: #848484;
					}
				}
			}
		}
	}

	.xuanzlan {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;

		.dqxuanz {
			width: 250rpx;
			text-align: center;
			border-bottom: solid 2rpx #ff007f;
			padding-bottom: 10rpx;
		}

		.weixd {
			width: 250rpx;
			text-align: center;
			// border-bottom: solid 2rpx #ff007f;
			padding-bottom: 12rpx;
		}
	}

	.header {
		// height: 320rpx;
		background-color: #f4f4f4;
		position: relative;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 50rpx;

		.order-center {
			font-size: 26rpx;
			color: #111;
			position: absolute;
			// top: 20rpx;
			right: 30rpx;
		}

		.order-price {
			font-size: 30rpx;
			color: #ff0000;
			margin-bottom: 44rpx;
			font-weight: bold;
		}

		.erwema {
			width: 300rpx;
			height: 300rpx;
		}

		.header-text-1 {
			color: #969696;
			font-size: 26rpx;
			margin-bottom: 19rpx;
		}

		.header-text-2 {
			color: #969696;
			font-size: 26rpx;

			text {
				color: #ff0000;
				padding: 0 10rpx;
			}
		}
	}

	.pay-item {
		height: 102rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.pay-item-left {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #222222;

			.pay-icon {
				width: 42rpx;
				margin-right: 20rpx;
			}
		}

		.check-icon {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.footer {
		display: flex;
		position: fixed;
		align-items: center;
		justify-content: center;
		bottom: 30rpx;
		width: 100%;

		.zfann {
			width: 670rpx;
			height: 80rpx;
			background: #ff007f;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			border-radius: 40rpx;
		}
	}
</style>
